import React, { memo, useState, useEffect } from "react";
import { View } from "@tarojs/components";
import { Icon } from '@antmjs/vantui'
import { formatDate } from "@/utils/fomatter";
import { getNavBarHeight } from "@/utils";
import Taro from '@tarojs/taro';
import { useDispatch } from 'react-redux'



import './index.scss'

const ReportHeader = (props) => {
  const dispatch = useDispatch()
  const { reportItem } = props
  const navPosition = Taro.getStorageSync('nav-position') ? JSON.parse(Taro.getStorageSync('nav-position')) : {}
  const [navBarHeight, setNavBarHeight] = useState<any>('')
  useEffect(() => {
    let result = getNavBarHeight()
    setNavBarHeight(result)
  }, [])


  const goBack = () => {
    Taro.navigateBack()
    dispatch({
      type: 'scrollLeft/changeScrollLeft',
      payload: { scrollLeft: 0 }
    })
    dispatch({
      type: 'scrollLeft/changeScrollEndLeft',
      payload: { scrollEndLeft: 0 }
    })
  }
  return (
    <View className='report-header' style={{ height: `${navBarHeight}px` }}>
      <View className='title-center' >
        <Icon
          name='arrow-left'
          size='20px'
          style={{ height: `${navPosition.height}px` }}
          onClick={() => goBack()}
        ></Icon>
        <View className='page-title' >
          <View className='text5'>报告详情</View>
          <View className='gray4'>{reportItem?.reportName}-{formatDate(reportItem?.netDate?.toString(), 'string', 'YYYY年MM月')}</View>
        </View>
      </View>
    </View>

  );
};

export default memo(ReportHeader);
